<style lang="less">
.multi-upload-images{
  display: flex;
  flex-wrap: wrap;

  .image-item{
    position:relative;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    margin: 5px;
    width:100px;
    height:100px;
    line-height: 100px;
    text-align: center;
    overflow: hidden;

    .delete{
      position:absolute;
      top: 5px;
      right: 5px;
      font-size: 24px;
    }
  }

  .img-upload{
    .el-upload{
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      margin: 5px;
      cursor: pointer;
      position: relative;
      overflow:hidden;

      &:hover{
        border-color: #409eff;
      }
    }

    .img-uploader-icon{
      font-size: 28px;
      color: #8c939d;
      width:100px;
      height:100px;
      line-height:100px;
      text-align: center;
    }
  }
}
.tips{
  color:red;
  font-size:12px;
}
</style>

<template>
  <div class="multi-upload-images">
    <div class="image-item" v-for="(item, idx) in model">
      <el-image :src="item" fit="cover" />
      <el-icon class="delete" @click="handleRemove(idx)"><Delete /></el-icon>
    </div>
    <el-upload class="img-upload"
      accept="image/*"
      :action="props.action"
      :headers="headers"
      :multiple="true"
      :show-file-list="false"
      :before-upload="handleBeforeUpload"
      :on-success="handleSuccessUpload"
      :on-progress="handleProgress"
      v-if="model.length < props.limit"
    >
      <el-icon class="img-uploader-icon"><Plus /></el-icon>
    </el-upload>
  </div>
  <div v-if="props.limit > 0 && props.showTips" class="tips">提示:最多可选{{ props.limit }}张</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'
import { ElMessage, type UploadProgressEvent, type UploadUserFile } from 'element-plus'
import cfg from "@/config/config"
import ResultCode from '@/config/resultcode'
import { useUserStore } from '@/stores/user'

interface Props {
  action?: string
  headers?: any
  maxSize?: number
  showTips?: boolean
  limit?: number
}

const model = defineModel<string[]>({required: true})
const props = withDefaults(defineProps<Props>(), {
  action: cfg.uploadAction,
  headers: {},
  maxSize: 2048,
  showTips: true,
  limit: 0
})
const emit = defineEmits(['uploaded', 'removed'])
const progress = ref(0)
const headers = computed(() => {
  const store = useUserStore()
  return {
    appkey: cfg.appkey,
    Authorization: cfg.tokenHead + store.userInfo?.token,
    ...props.headers
  }
})

const handleRemove = (index : number) => {
  model.value = model.value.filter((path, idx) => index !== idx)
  emit('removed', index)
}
const handleBeforeUpload = (file : any) => {
  const isLimit = file.size / 1024 > props.maxSize
  if (isLimit) {
    ElMessage.error('文件不能大于' + props.maxSize + 'k')
  }
  return !isLimit
}
const handleSuccessUpload = (res : any, file: UploadUserFile) => {
  if (res.code !== ResultCode.SUCCESS) {
    ElMessage.error('上传失败:' + res.message)
    return
  }
  model.value = [...model.value, res.data.path]
  emit('uploaded', [res.data, file])
}
const handleProgress = (evt : UploadProgressEvent, file: UploadUserFile, files: UploadUserFile[]) => {
  progress.value = evt.percent
}
</script>